<template>
	<view class="place-order">
		<view class="order">
			<view class="item">
				<view class="left" v-if="show">
					<view class="name" style="font-weight: 600;">{{ address.province }}{{ address.county }}{{ address.city }}{{ address.address }}</view>
					<view class="name">
						{{ address.contacts }}
						<text style="margin-left: 30rpx;">{{ address.phone }}</text>
					</view>
				</view>
				<view v-else style="font-size: 38rpx;">请选择地址</view>
				<view class="right" @click="getDz"><van-icon name="arrow" size="20" /></view>
			</view>
			<view class="address-border"></view>
		</view>

		<view class="order-shop">
			<view class="shop-img" v-if="!order.img == ''"><image :src="order.img" mode=""></image></view>
			<view class="shop-title">
				<view style="font-size: 28rpx; font-weight: 600;">{{ title }}</view>
				<view style="font-size: 24rpx; color: #888b99; font-weight: 400; margin-top: 10rpx;">{{ order.label }}</view>
				<view style="font-size: 30rpx; font-weight: 700; margin-top: 20rpx;">
					<text style="font-size: 24rpx; font-weight: 500;">￥</text>
					{{order.peice}}
				</view>
			</view>
		</view>

		<view class="point-out">
			温馨提示：为保障劳动者的时间效益，临近服务时间取消订单，将扣除一定比例金额，恳请您谅解
			<text style="color: #1e90e3;">查看详情</text>
		</view>
		<view class="button"><van-goods-action-button @click="getAddOrder" text="确认支付" /></view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reqgetdzList, reqgetdz } from '@/api/modules/address.js'
import { reqShopOrder, reqZfjk } from '@/api/modules/order.js'
import { GetOrder } from '@/store/order.js'
import { storeToRefs } from 'pinia'
import { reactive, toRefs } from 'vue'
import { GetAddress } from '@/store/address.js'
const getOrder = GetOrder()
const getAddress = GetAddress()
const state = reactive({
	address: [],
	cid: '',
	oid: '',
	aid: '',
	orderId: '',
	show: true
})

// 跳转地址页
const getDz = () => {
	uni.navigateTo({
		url: '/subpkg/address/address'
	})
}

//提交订单
const getAddOrder = async () => {
	const { data } = await reqZfjk({ cid: state.orderId, onsale: 2 })
	console.log(state.orderId);
	if (data.code === 200) {
		uni.showToast({
			title: '支付成功',
			icon: 'none'
		})
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/order/order'
			})
		})
	} else {
		uni.showToast({
			title: '支付失败',
			icon: 'none'
		})
	}
}

// 提交订单
const getShop = async () => {
	const { province, county, city, address } = state.address
	const address2 = province + county + city + address
	const { phone } = uni.getStorageSync('USERINFO')
	const { data } = await reqShopOrder({ phone, address: address2, cid: state.cid, oid: state.oid })
	state.orderId = data.data
}

const getaddress = async () => {
	const userInfo = uni.getStorageSync('USERINFO')
	const { data } = await reqgetdz({ id: getAddress.aid, uid: userInfo.uid })
	state.address = data.data[0]
	getShop()
}

// 获取默认地址
const getSilent = async () => {
	const pages = getCurrentPages()
	const page = pages[pages.length - 2].route
	if (page === 'subpkg/details/details') {
		const id = ''
		getAddress.addsserId(id)
	}
	const { data } = await reqgetdzList()
	if (!data.data.length) {
		uni.showToast({ title: '请选择地址', icon: 'none' })
		state.show = false
		return
	}
	const index = data.data.findIndex(item => item.onsale === 1)
	if (index === -1) {
		state.address = data.data[0]
	} else {
		state.address = data.data[index]
	}
	const aid = getAddress.aid
	if (aid === '') {
		getShop()
	} else {
		getaddress()
	}
}

// 初始化
const init = () => {
	console.log(getOrder.order)
}

// 页面加载
onLoad(message => {
	state.cid = message.cid
	state.oid = message.oid
	state.aid = message.aid
	// console.log(message)
	getSilent()
	init()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { address, show } = toRefs(state)
const { order, title } = storeToRefs(getOrder)
</script>

<style lang="scss">
page {
	padding: 0;
	background-color: #f5f5f5;
}
.order {
	background-color: #fff;
}
.item {
	padding: 20rpx;
	display: flex;
	background-color: #fff;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	padding: 20rpx 30rpx;
	.left {
		.name {
			font-size: 32rpx;
			&:nth-child(2) {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #000;
			}
		}
	}

	.right {
		padding: 20rpx 0 20rpx 20rpx;
	}
}
.address-border {
	background-color: #f5f5f5;
	background: url();
	height: 10rpx;
	width: 150%;
	margin-left: -10rpx;
	background-size: auto 100%;
}

.order-shop {
	background-color: #fff;
	padding: 40rpx 0 40rpx 80rpx;
	margin-top: 20rpx;
	display: flex;
	.shop-img {
		image {
			width: 140rpx;
			height: 140rpx;
		}
	}
	.shop-title {
		margin-left: 20rpx;
	}
}
.point-out {
	color: #949ea3;
	font-size: 26rpx;
	margin-top: 40rpx;
	padding: 0 40rpx;
}
.button {
	width: 95%;
	padding: 0 20rpx;
	position: absolute;
	bottom: 30rpx;
	.van-button {
		height: 100rpx;
	}
}
</style>
